<template>
  <div>
    <h3>select组件的使用</h3>
    <h4>数据写死在页面上</h4>
    <el-select v-model="cityName">
      <el-option value="北京">北京</el-option>
      <el-option value="上海">上海</el-option>
    </el-select>

    <h4>将数据库中的选项（动态数据）放到下拉框中</h4>
    <el-select v-model="optionId" placeholder="请选择">
      <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
    </el-select>

    <h4>下拉框属性测试</h4>
    <el-select v-model="optionId" placeholder="请选择" multiple clearable>
      <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
    </el-select>

    <h5>下拉框事件学习</h5>
    <el-select v-model="optionId" placeholder="请选择" multiple clearable @change="printOps">
      <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
    </el-select>

    <h5>下拉框方法的使用</h5>
    <el-select v-model="optionId" placeholder="请选择" multiple clearable @change="printOps" ref="departments">
      <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
    </el-select>
    <el-button @click="getFocus">测试方法</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {id: 1, name: '研发部'},
        {id: 2, name: '财务部'},
        {id: 3, name: '销售部'},
      ],
      optionId: "",
      cityName: "",
    }
  },
  methods:{
    printOps(val) {
      // 这里的val和optionId是双向绑定,所以值相同
      console.log(val);
      console.log(this.optionId);
    },
    getFocus() {
      this.$refs.departments.focus();
    },
  }

}
</script>

<style scoped>

</style>
